<template>
    <v-chart :option="option"></v-chart>
</template>

<script setup>
import {ref,onMounted} from 'vue'
//引入水球图插件,在echarts中可以使用type-liquidFill引用
import 'echarts-liquidfill'

import { getReportData } from '@/api';
import { color } from 'echarts';

const option = ref({})

const renderChart = (data) => {
    option.value = {
        series:{
            type:'liquidFill',
            data:[data],
            color:['red'],
            radius:'80%',//水球的半径
            outline:{
                borderDistance:2,//轮廓的距离(padding)
                itemStyle:{
                    borderWidth:2,//轮廓的宽度(border)
                }
            },//连线的轮廓
            amplitude:'4%',//波浪的高度(振幅)
        }
    }
}

onMounted(async() => {
    const res = await getReportData()

    const data = (res.salesGrowLastDay / 100).toFixed(2)
    renderChart(data)
})
</script>

<style scoped>
</style>